import { QuestionCircleOutlined } from "@ant-design/icons";
import { Button, Divider, Popconfirm } from "antd";
import { FC } from "react";

const OptionBar: FC<{ onAdd?: () => void, onUpdate?: () => void, onDelete?: () => void }> = ({ onAdd, onDelete, onUpdate }) => {
    let bars: JSX.Element[] = []
    function push(e: JSX.Element) {
        if (bars.length > 0) {
            bars.push(<Divider type="vertical" />)
        }
        bars.push(e)
    }
    if (onAdd) {
        bars.push(<Button size="small" type="link" onClick={onAdd}>新增</Button>)
    }
    if (onUpdate) {
        bars.push(<Button size="small" type="link" onClick={onUpdate}>修改</Button>)
    }
    if (onDelete) {
        bars.push(<Popconfirm title="确定删除?" onConfirm={onDelete} icon={<QuestionCircleOutlined style={{ color: 'red' }} />}>
            <Button size="small" type="text" danger>删除</Button>
        </Popconfirm>)
    }
    return <>
        {bars}
    </>
}

export default OptionBar;